<template>
  <div>
    <el-card>
      <div class="header-card">
        <el-image class="user-avatar" :src="userStore.avatar" fit="fill" :lazy="true" />
        <div class="user-info">
          <h2 class="title">{{ getTime() }}好，{{ userStore.username }}！</h2>
          <p class="subtitle">阿森甄选平台</p>
        </div>
      </div>
    </el-card>
    <div class="bottom">
      <svg-icon name="welcome" width="600px" height="300px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user';
import { getTime } from '@/utils/time';

let userStore = useUserStore();
</script>

<style lang="scss" scoped>
.header-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  .user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }
  .user-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100px;
    margin-left: 20px;
    .title {
      font-weight: bold;
    }
    .subtitle {
      color: #999;
      font-style: italic;
    }
  }
}

.bottom {
  margin-top: 100px;
  display: flex;
  justify-content: center;
}
</style>
